<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医生信息</title>
    <link  href="../../images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/editor/summernote.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/messages_doctor_mes_add.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/sweetalert.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <script src="/js/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/css/editor/summernote.js"></script>

</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">

        <!--右边内容-->
        <div class="message_right_cont_box">
            <div>
                <div class="message_right_cont_container" id="add_doctor">
                    <div class="add_doctor">
                        <span>添加医生</span>
                        <a  @click="back()"><button >返回</button></a>
                    </div>
                    <%--添加医生开始--%>
                    <%--医生基本信息开始--%>
                    <div class='mes_add'>
                        <div class='mes_add_image'>
                            <input type="file" class='mes_add_image_input'>
                            <div class="doctor_up_load_img" id="99">
                                <img src="/images/up_load.png">
                            </div>
                        </div>
                        <div class='mes_add_input'>
                            <ul class='mes_add_input_ul'>
                                <li><span>一级科室:</span>
                                    <select  class="doc_edi_sel par_choose_select" id="first_id" @change='choose_first_depts()'>
                                        <option :value="0" :deptCode="0">---请选择---</option>
                                        <template v-for="first_dept in first_depts">
                                            <option :value="first_dept.id"  :deptCode="first_dept.deptCode"  v-html="first_dept.deptName"></option>
                                        </template>
                                    </select>
                                </li>
                                <li class="doc_name"><span>医生姓名:</span><input class="doc_name_input" name='name' type="text" v-model="name">
                                    <%--<span class="name_tip">请输入医生姓名</span></li>--%>


                                <li class="doc_number"><span>医生编号:</span><input  v-model="doctorCode" class="doc_doctorCode_input"  name='doctorCode' type="text" >
                                    <%--<span class="number_tip">请输入医生编号</span></li>--%>

                            </ul>
                        </div>
                        <div class='mes_add_input'>
                            <ul class='mes_add_input_ul'>
                                <li class="ch_choose_select_box"><span>二级科室:</span>
                                    <select  class="doc_edi_sel ch_choose_select" id="second_id">
                                        <option :value="0" :deptCode="0">---请选择---</option>
                                        <template v-for="second_dept in second_depts">
                                            <option :value="second_dept.id"  :deptCode="second_dept.id"  v-html="second_dept.deptName"></option>
                                        </template>
                                    </select>
                                </li>
                                <li><span>医生性别:</span>
                                    <select  class="doc_edi_sel" id="sex">
                                        <option value="1" >男</option>
                                        <option value="0" >女</option>
                                    </select>
                                </li>
                                <li><span>是否是专家:</span>
                                    <select  class="doc_edi_sel ccccc" id="isExpert" @change="change_show_hide()">
                                        <option value="0" >否</option>
                                        <option value="1" >是</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                        <div class='mes_add_input'>
                            <ul class='mes_add_input_ul'>
                                <li >
                                    <%--<p class="first_second_tip">一级科室和二级科室不能为空</p>--%>
                                </li>
                                <li><span>医生级别:</span><input name='level' type="text" v-model="level"></li>
                                <li class="doctor_time"><span class="dept_time">门诊时间:</span><input name='time' id="time111" type="text"  v-model="time"></li>
                            </ul>
                        </div>
                        <div class='clearfix'></div>
                    </div>
                    <%--医生基本信息结束--%>
                    <%--医生擅长开始--%>
                    <div class='doc_good_at'>
                        <div class='doc_good_at_tip'><span>医生擅长:</span>(限输入500字符)</div>
                        <div class='doc_good_at_textarea'>
                            <textarea name="specialty" id="" style="width:900px;height:100px;" maxlength="500" v-model="specialty"></textarea>
                        </div>
                    </div>
                    <%--医生擅长结束--%>
                    <%--医生介绍开始--%>
                    <div class='doc_good_at'>
                        <div class='doc_good_at_tip'><span>医生介绍:</span></div>
                        <div style="width:900px;">
                            <div id="editor" ></div>
                        </div>
                    </div>
                    <%--医生介绍结束--%>
                    <%--医生编辑取消和确定开始--%>
                    <div class="add_doctor_cancel_sure">
                        <a ><span class="message_giveup span_give_up" @click="back()">取消</span></a>
                        <span class="message_save message_sure" @click="submit()">确定</span>

                    </div>
                    <div class="clearfix"></div>
                    <%--医生编辑取消和确定结束--%>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <script src="/js/jquery.selectlist.js?cache=<%=Math.random()%>"></script>
    <script>
        new Vue({
            el:"#add_doctor",
            data:{
                first_deptid:"",
                first_depts:[],
                second_depts:[],
                head_img:"",
                first_deptcode:"",
                second_deptcode:"",
                sex:"",
                level:"",
                isExpert:"",
                name:"",
                doctorCode:"",
                time:"",
                specialty:"",
            },
            ready:function(){
                $('.doctor_time').hide()
                var self=this;
                $(document).ready(function() {
                    $('#editor').summernote({
                        height:260,
                        lang:'zh-CN',
                        callbacks: {
                            onImageUpload: function(files) {
                                // upload image to server and create imgNode...
                                var img = localImg(files[0]);
                            }
                        }
                    });
                });
                function localImg(file) {
                    var xmlhttprequest;
                    var form = new FormData();
                    form.append("file", file);
                    if (window.XMLHttpRequest) {
                        xmlhttprequest = new XMLHttpRequest();
                        if (xmlhttprequest.overrideMimeType) {
                            xmlhttprequest.overrideMimeType("text/xml");
                        }
                    }
                    xmlhttprequest.open("POST", "http://cloud.eeesys.com/pu/upload.php", true);
                    xmlhttprequest.onreadystatechange = callback.bind(this);
                    xmlhttprequest.send(form);
                    function callback() {
                        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                            var res = JSON.parse(xmlhttprequest.responseText);
                            if (res.errcode == 0) {
                                $('#editor').summernote('insertImage', res.img);
                            } else {
                                swal({
                                    txt: decodeURI(res.errmsg),
                                    title: "",
                                });
                            }
                        }
                    }
                }
                $.ajax({
                    type: 'POST',
                    url: "add_doctor.jsp",
                    data:{
                        act:'first_depts'
                    },
                    timeout: 3000,
                    dataType: 'json',
                    success: function(res) {
                        console.log(res)
                        if (res.errcode == 0) {
                            self.first_depts = res.depts;
                            self.first_deptcode = $('.par_choose_select option:selected').attr('deptCode');
                        } else {
                            self.first_depts = []
                        }
                    },
                });
                <%--上传图片--%>
                var img_url="";
                $('.mes_add_image_input').change(function(e){
                    <%--图片预览--%>
                    UpladFile(e.target);
                    var file=e.target.files[0]
                    var img=new Image();
                    img.src=URL.createObjectURL(file);
                    var url=img.src;
                    var $img=$(img);
                    img.onload=function(){
                        URL.revokeObjectURL(url);
                        $('.doctor_up_load_img').empty().append($img);
                    }
                })
                // <%--上传文件--%>
                function UpladFile(obj) {
                    var objVal = $(obj).val();
                    var name = objVal.split("\\")[2];
                    var tail = name.split(".")[1];
                    if(tail=="jpg"||tail=="png"||tail=="jpeg"){
                        var fileObj = obj.files[0]; 						// js 获取文件对象
                        var FileController = "http://cloud.eeesys.com/pu/upload.php";                    // 接收上传文件的后台地址
                        // FormData 对象
                        var form = new FormData();
                        form.append("author", "hooyes");                    // 可以增加表单数据
                        form.append("act", "file");                    // 可以增加表单数据
                        form.append("file", fileObj);                       // 文件对象
                        // XMLHttpRequest 对象
                        var xhr = new XMLHttpRequest();
                        xhr.open("post", FileController, true);
                        xhr.onload = function (res) {
                            var rr = JSON.parse(xhr.responseText);
                            var timestamp = Date.parse(new Date()) + "";
                            self.head_img =rr.url;
                        };
                        xhr.send(form);
                        return;
                    }
                    else{
                        $(obj).val('');
                        swal("只支持jpg和png的图片格式");
                        return;
                    }
                }
            },
            methods:{
                change_show_hide:function(){
                    var option=$('#isExpert option:selected').val();
                    if (option==1){
                        $('.doctor_time').show()
                    }else{
                        $('.doctor_time').hide()
                    }
                },
                get_second_depts:function(){
                    var self=this;
                    $.ajax({
                        type: 'post',
                        url: "add_doctor.jsp",
                        data: {
                            act:"second_depts",
                            deptCode:self.first_deptcode
                        },
                        timeout: 3000,
                        dataType: 'json',
                        success:function (res) {
                            if(res.errcode==0){
                                self.second_depts=res.depts;
                            }else{
                                swal('没有一级科室列表数据')
                            }
                            //console.log(data)
                        },
                        error:function (error) {
                            swal('没有一级科室列表数据')
                        }
                    });
                },
                choose_first_depts:function(){
                    var self=this;
                    self.first_deptcode = $('.par_choose_select option:selected').attr('deptCode');
                    console.log(self.first_deptcode);
                    self.get_second_depts()
                },
                submit:function(){
                    var self=this;
                    var sHTML = $('.note-editable').html();
                    self.sex = $('#sex').val()
                    self.isExpert = $('#isExpert').val()
                    self.second_deptcode = $('.ch_choose_select option:selected').attr('deptCode');

                    if(self.first_deptcode == "0" || self.second_deptcode == "0"){
                        swal("一级科室二级科室不能为空")
                        return;
                    }else if(self.name.trim() ==""){
                        swal("请输入医生姓名")
                        return;
                    }else if(self.doctorCode.trim() ==""){
                        swal("请输入医生编号")
                        return;
                    }else{
                        $.ajax({
                            type: 'POST',
                            url: "add_doctor.jsp",
                            data:{
                                act:'add_doctor',
                                second_id:self.second_deptcode ,
                                sex:self.sex,
                                level:self.level,
                                isExpert:self.isExpert,
                                name:self.name,
                                doctorCode:self.doctorCode,
                                time:self.time,
                                specialty:self.specialty,
                                content:encodeURI(sHTML.replace(/"/g, "'")),
                                head_image:self.head_img
                            },
                            success: function(res) {
                                console.log(res);
                                res = JSON.parse(res);
                                if (res.errcode == 0) {
                                    location.href="see.jsp";
                                } else {

                                }
                            }
                        });
                    }
                },
                back:function(){
                    location.href="see.jsp";
                }
            }
        })
    </script>
</body>
</html>
